<script lang="ts" setup>
const urlPath = ref<{ path: string; title: string }[]>([
  { path: "/", title: "主页" },
  { path: "/user/edit", title: "个人资料" },
  { path: "/user/follow", title: "你的关注" },
]);
const breadcrumbUrl = ref<{ path: string; title: string }[]>([
  { path: "/", title: "主页" },
]);
const changeUrl = (url: string, title: string) => {
  console.log(url, title);
  const u = { path: url, title };
  // if (JSON.stringify(breadcrumbUrl.value)?.includes(JSON.stringify(u))) {
  //   breadcrumbUrl.value = breadcrumbUrl.value.filter((b: { path: string; title: string }) => {
  //     return b.path !== u.path;
  //   });
  // } else {
  breadcrumbUrl.value[1] = u;
  // }
  console.log(breadcrumbUrl.value);
};
</script>
<template>
  <el-container>
    <el-header>
      <el-breadcrumb separator="/">
        <el-breadcrumb-item
          :to="{ path: item.path }"
          v-for="(item, index) in breadcrumbUrl"
          :key="index"
        >
          {{ item.title }}
        </el-breadcrumb-item>
      </el-breadcrumb>
    </el-header>
    <el-container>
      <el-aside width="250px">
        <UserAside @changeUrl="changeUrl" :urlPath="urlPath" />
      </el-aside>
      <el-main style="min-width: 480px">
        <router-view />
      </el-main>
    </el-container>
  </el-container>
</template>
<style lang="scss" scoped>
.el-container {
  display: flex;
  width: 100vw;
  height: 100vh;
  justify-content: center;
  align-items: center;
}
.el-header {
  display: flex;
  align-items: center;
}
.el-main {
  flex-grow: 0;
}
</style>
